<template>
    <div>
        <div style="display:flex;">

            <div @click="handleClick(1)"
                style="display: flex; background:white; padding:20px; border-radius:10px; position: relative; padding-right: 148px; cursor: pointer;">
                <div v-if="cms.is_pur == 1" class="tabri-green">未安装</div>
                <div v-else-if="cms.is_pur == 0" class="tabri-red">未购买</div>
                <div>
                    <img src="@/assets/images/yun.png" alt="" style="width: 63px; height: 63px" />
                </div>
                <div style="display: flex; flex-direction: column; margin-left: 30px">
                    <span style="font-size: 25px; font-weight: 400">官网管理</span>
                    <span style="
                                font-size: 16px;
                                font-weight: 400;
                                color: rgba(128, 128, 128, 1);
                            ">
                        官网管理
                    </span>
                </div>
            </div>


            <div @click="handleClick(2)"
                style="display: flex;background:white;padding:20px;border-radius:10px;margin-left:20px;position: relative;">
                <!-- 标签 -->
                <div v-if="gzh.is_pur == 1" class="tabri-green"> 未安装 </div>
                <div v-else-if="gzh.is_pur == 0" class="tabri-red">未购买</div>

                <div>
                    <img src="@/assets/images/gzh.png" alt="" style="width: 63px; height: 63px" />
                </div>
                <div style="display: flex; flex-direction: column; margin-left: 30px">
                    <span style="font-size: 25px; font-weight: 400;">公众号无限畅连</span>
                    <span style="
                                        font-size: 16px;
                                        font-weight: 400;
                                        color: rgba(128, 128, 128, 1);
                                    ">
                        公众号无限授权、接入多平台
                    </span>
                </div>
            </div>


        </div>
        <!-- <div class="error404" v-else> -->
        <!-- <error code="403" title="您的账号暂未购买插件" :show-btn="false">
                <template #content>
                    <div class="flex justify-center">
                        <img class="w-[150px] h-[150px]" src="@/assets/images/no_perms.png" alt="" />
                    </div>
                </template>
</error>
</div> -->
    </div>
</template>
<script lang="ts" setup>
import {
    getAppPlugsList
} from "@/api/plug/index";
import Error from '@/views/error/components/error.vue'
const isInstalled = ref(false);
const cms = reactive({

})
const all = ref(false)
const gzh = reactive({

})

const handleClick = (act: any) => {
    if (act == 1) {
        if (cms.is_pur === 0) {

            window.open("https://www.xiaojiangy.com/web/?clumn_id=48&app_id=33", "_blank");
        } else if (cms.is_pur === 1) {


            window.location.href = "/admin/plug/access/index#/cloudupdate/plug";

        } else {

            window.location.href = "/admin/plug/access/index#/plug/website_application/column";
        }
    }

    if (act == 2) {
        if (gzh.is_pur === 0) {

            window.open("https://www.xiaojiangy.com/web/?clumn_id=48&app_id=36", "_blank");
        } else if (gzh.is_pur === 1) {


            window.location.href = "/admin/plug/access/index#/cloudupdate/plug";

        } else {

            window.location.href = "/admin/plug/access/index#/plug/access/index";
        }
    }


};

const getList = async () => {
    const results = await getAppPlugsList({})
    if (results.is_adminapi != 0) {
        all.value = true
    }
    if (results.list.length != 0) {
        for (var i in results.list) {
            if (results.list[i].app == 'adminapi_cms') {
                cms.is_pur = results.list[i].is_pur;
            }
            if (results.list[i].app == 'adminapi_wxgzh') {
                gzh.is_pur = results.list[i].is_pur;
            }
        }
    }

}
getList()
</script>
<style>
.tabri-red {

    position: absolute;
    top: 0px;
    right: 0;
    padding: 2px 8px;
    font-size: 12px;
    color: white;
    background-color: red;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

.tabri-green {
    position: absolute;
    top: 0px;
    right: 0;
    padding: 2px 8px;
    font-size: 12px;
    color: white;
    background-color: green;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
</style>
